<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>登录</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<style type="text/css">
		body{
			background-image: url("img/batthern.png");
		}
		.login-nav{
			border-radius: 4px 4px 0 0;
		}

		.login-content{
			margin: 0;
			border-radius: 0 0 4px 4px;
		}

		#message{
			margin-left: auto;
			margin-right: auto;
			width: 300px;
			min-height:50px;
		}

		#content{
			margin-left: auto;
			margin-right: auto;
			width: 500px;
			/* margin-top: 20px; */
		}
		
		#subform{
			width:220px;
			margin-left: auto;
			margin-right: auto;
		}
	</style>
</head>
<body>
	<div class="container" style="margin-top: 100px;">
		<div class="container" style="width: 800px;" id="loginnav">
			<!-- login nav begin -->
			<div class="navbar" style="margin: 0;">
	    	<div class="navbar-inner login-nav">
		    	<div class="container">
		    		    <a class="brand" href="#">投票管理系统</a>
		   		</div>
	    	</div>
	    </div><!-- login nav end -->

	    <div class="wall login-content">
	    	<div id="message">
	    		<div class="alert" style="display:none;">
				    <button class="close">×</button>
				    <strong>系统提示：</strong><span id="msg"></span>
    			</div>
	    	</div>
	    	
	    	<div id="content">
		    	<form class="form-horizontal" action="javascript:;">
				    <fieldset>
					    <div class="control-group" id="username">
					    	<label class="control-label" for="nameInput" style="width: 100px;">用户名</label>
						    <div class="controls" style="margin-left: 120px;">
						    	<input autoComplete="off" type="text" class="input-xlarge" id="nameInput" placeholder="请输入用户名" />
						    </div>
					    </div>
	
					    <div class="control-group">
					    	<label class="control-label" for="passwordInput" style="width: 100px;">密码</label>
						    <div class="controls" style="margin-left: 120px;">
						    	<input type="password" class="input-xlarge" id="passwordInput" placeholder="请输入密码" />
						    </div>
					    </div>
	
					    <div class="control-group">
					    	<label class="control-label" for="validatorInput" style="width: 100px;">验证码</label>
						    <div class="controls" style="margin-left: 120px;">
						    	<input autoComplete="off" type="text" class="input-xlarge" id="validatorInput" placeholder="请输入验证码" />
						    	<p class="help-block"><a href="javascript:;" id="validatorImg"><img id="img" src="jcaptcha.jpg" alt="验证码" title="点击重新获取验证码" /></a></p>
						    </div>
					    </div>
					 	<div id="subform">
					    	<button class="btn btn-large btn-primary" style="padding:5px 12px;" id="formok">登录</button>&nbsp;&nbsp;
					    	<a href="#">忘记密码？</a>
					    </div>
				    </fieldset>
	    		</form>
    		</div>
	    </div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.md5.js"></script>
	
	<script type="text/javascript">
		$(function() {
			$(".close").click(function() {
				$(".alert").hide();
			});
			
			$("#validatorImg").click(function() {
				$("a>img").attr("src", "jcaptcha.jpg?xx=" + Math.random());
			});
			
			$("#formok").click(function() {
				var username = $("#nameInput").val().trim();
				var password = $("#passwordInput").val().trim();
				var jcaptcha = $("#validatorInput").val().trim();
				
				if(username == "") {
					$("#msg").text("用户名不能为空！");
					$(".alert").show();
					return;
				}
				
				if(password == "") {
					$("#msg").text("密码不能为空！");
					$(".alert").show();
					return;
				}
				
				if(jcaptcha == "") {
					$("#msg").text("请输入验证码！");
					$(".alert").show();
					return;
				}
				
				password = $.md5(password);
				password = $.md5(username + password);
				password = $.md5(password, jcaptcha);
				
				$.ajax({
					url : 'login.jspx',
					type : 'POST',
					data : {
						username : username,
						password : password,
						jcaptcha : jcaptcha
					}
				}).done(function(msg) {
					if(msg == 1001) {
						showError($("#validatorInput"), "验证码错误！");
					} else if(msg == 1002) {
						showMsg("用户名或密码错误");
					} else {
						window.location.href = "main.jspx";
						return;
					}
					
					$("a>img").attr("src", "jcaptcha.jpg?xx=" + Math.random());
				});
			});
		});
		
		function showError(input, msg) {
			$("#msg").text(msg);
			$(".alert").addClass("alert-error").show();
			input.val("").focus();
		}
		
		function showMsg(msg) {
			$("#msg").text(msg);
			$("#validatorInput").val("");
			$(".alert").addClass("alert-error").show();
		}
		
		function hideMsg() {
			$(".alert").hide();
		}
		
		$(function() {
			$("#validatorInput").keydown(hideMsg);
			$("#nameInput").keydown(hideMsg);
			$("#passwordInput").keydown(hideMsg);
		});
	</script>
</body>
</html>
